<template>
  <view class="container">
    <!-- 顶部信息：总获利和可提现余额 -->
    <view class="topclass" style="height: 798rpx; background: linear-gradient(180deg, #ffdfc9 0%, rgba(252, 252, 252, 0) 100%)"></view>
    <view style="padding: 20rpx">
      <view class="bgicss">
        <view class="textcss">
          <span>邀请人数</span><span class="mcss">{{ totalss || 0 }}</span>
        </view>
        <view class="textcss">
          <span>总获利</span><span class="mcss">{{ zSum || 0 }}</span>
        </view>

        <view class="textcss">
          <span>可提现余额</span><span class="mcss">{{ yueSum || 0 }}</span>
        </view>
      </view>
      <span @click="tixian" style="position: absolute; top: 20px; right: 15px; font-size: 24rpx; color: #ead3d3; font-weight: bold">提现</span>
    </view>

    <!-- Tabs切换按钮 -->
    <view class="tabs">
      <div :class="{ 'tab-item': true, active: activeTab === 3 }" @click="switchTab(3)">邀请记录</div>
      <div :class="{ 'tab-item': true, active: activeTab === 1 }" @click="switchTab(1)">返利记录</div>
      <div :class="{ 'tab-item': true, active: activeTab === 2 }" @click="switchTab(2)">提现记录</div>
    </view>
    <!-- 邀请记录板块 -->
    <view v-show="activeTab === 3" class="invite-section">
      <list v-if="yaoqingList.length > 0">
        <cell v-for="(item, index) in yaoqingList" :key="index">
          <view style="display: flex; flex-direction: column; padding: 10rpx; margin-top: 10rpx; height: 162rpx; background: #ffffff; border-radius: 20rpx; justify-content: space-around">
            <view style="margin-left: 10rpx; display: flex; align-items: center; justify-content: space-between">
              <view style="display: flex; align-items: center">
                <image
                  style="width: 75rpx; height: 75rpx; border-radius: 50%"
                  :src="
                    item.avatar && item.avatar.includes('http')
                      ? item.avatar
                      : item.avatar
                      ? imgurl + item.avatar
                      : 'https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/03/25/zwsj_20250325090754A001.png'
                  "
                  mode="aspectFill"
                ></image>
                <view class="itemback" style="margin-left: 10rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; font-size: 26rpx; color: #333333; text-align: center">
                  {{ (item.nickname && nameHide(item.nickname)) || "隐藏用户" }}
                </view>
              </view>
              <view style="margin-left: 20rpx; display: flex; align-items: center">
                <view class="itemback" style="font-family: PingFang SC, PingFang SC; font-weight: bold; font-size: 26rpx; color: #a6a6a6; text-align: right">
                  {{ item.createTime || "" }}</view
                >
              </view>
            </view>
            <view style="margin-left: 10rpx">
              <view class="itemback" style="margin-left: 10rpx; font-family: PingFang SC, PingFang SC; font-weight: 500; font-size: 22rpx; color: #869198; text-align: left">
                <span style="font-family: Alibaba PuHuiTi, Alibaba PuHuiTi; font-weight: 500; font-size: 28rpx">{{ (item.phone && hideMiddleDigits(item.phone)) || "" }}</span>
              </view>
            </view>
          </view>
        </cell>
      </list>
      <view v-else style="text-align: center; padding: 10px; display: flex; flex-direction: column; align-items: center">
        <image class="" mode="aspectFit" src="https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/03/25/zwsj_20250325090754A001.png"> </image>
        <span style="font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 28rpx; color: #a8a8a8; line-height: 40rpx; text-align: center; font-style: normal">暂无数据</span>
      </view>
    </view>
    <!-- 申请提现记录板块 -->
    <view v-show="activeTab === 2" class="invite-section">
      <list v-if="okSpForm.length > 0">
        <cell v-for="(item, index) in okSpForm" :key="index">
          <view style="display: flex; flex-direction: column; padding: 10rpx; margin-top: 10rpx; height: 162rpx; background: #ffffff; border-radius: 20rpx; justify-content: space-around">
            <view style="margin-left: 10rpx; display: flex; align-items: center; justify-content: space-between">
              <view style="display: flex; align-items: center; font-size: 14px">
                <span style="color: red" v-if="item.status == 2">拒绝原因：{{ item.reasonRejection || "" }}</span>
                <span v-if="item.status == 0"> 待审核 </span>
                <span style="color: green" v-else-if="item.status == 1"> 已提现 </span>
              </view>
              <view style="margin-left: 20rpx; display: flex; align-items: center">
                <view class="itemback" style="font-family: PingFang SC, PingFang SC; font-weight: bold; font-size: 26rpx; color: #a6a6a6; text-align: right">
                  提现金额
                  {{ item.exchangeIntegrain || 0 }}</view
                >
              </view>
            </view>
            <view style="margin-left: 10rpx">
              <view class="itemback" style="margin-left: 10rpx; font-family: PingFang SC, PingFang SC; font-weight: 500; font-size: 22rpx; color: #869198; text-align: left">
                申请时间<span style="font-family: Alibaba PuHuiTi, Alibaba PuHuiTi; font-size: 28rpx; margin-left: 10rpx">{{ item.createTime || "" }}</span></view
              >
            </view>
          </view>
        </cell>
      </list>
      <view v-else style="text-align: center; padding: 10px; display: flex; flex-direction: column; align-items: center">
        <image class="" mode="aspectFit" src="https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/03/25/zwsj_20250325090754A001.png"> </image>
        <span style="font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 28rpx; color: #a8a8a8; line-height: 40rpx; text-align: center; font-style: normal">暂无数据</span>
      </view>
    </view>

    <!-- 返利记录板块 -->
    <view v-show="activeTab === 1" class="rebate-section">
      <list v-if="dataList.length > 0">
        <cell v-for="(item, index) in dataList" :key="index">
          <view style="display: flex; flex-direction: column; padding: 10rpx; margin-top: 10rpx; height: 162rpx; background: #ffffff; border-radius: 20rpx; justify-content: space-around">
            <view style="margin-left: 10rpx; display: flex; align-items: center; justify-content: space-between">
              <view style="display: flex; align-items: center">
                <image
                  style="width: 75rpx; height: 75rpx; border-radius: 50%"
                  :src="
                    item.avatar && item.avatar.includes('http')
                      ? item.avatar
                      : item.avatar
                      ? imgurl + item.avatar
                      : 'https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/03/25/zwsj_20250325090754A001.png'
                  "
                  mode="aspectFill"
                ></image>
                <view class="itemback" style="margin-left: 10rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; font-size: 26rpx; color: #333333; text-align: center">
                  {{ (item.nickname && nameHide(item.nickname)) || "隐藏用户" }}
                </view>
              </view>
              <view style="margin-left: 20rpx; display: flex; align-items: center">
                <view class="itemback" style="font-family: PingFang SC, PingFang SC; font-weight: bold; font-size: 26rpx; color: #a6a6a6; text-align: right">
                  {{ item.createTime || "" }}</view
                >
              </view>
            </view>
            <view style="margin-left: 10rpx">
              <view class="itemback" style="margin-left: 10rpx; font-family: PingFang SC, PingFang SC; font-weight: 500; font-size: 22rpx; color: #869198; text-align: left">
                返利佣金：<span style="font-family: Alibaba PuHuiTi, Alibaba PuHuiTi; font-weight: 500; font-size: 28rpx; color: #ff5252">{{ item.gainIntegralReture || 0 }}</span></view
              >
            </view>
          </view>
        </cell>
      </list>
      <view v-else style="text-align: center; padding: 10px; display: flex; flex-direction: column; align-items: center">
        <image class="" mode="aspectFit" src="https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/03/25/zwsj_20250325090754A001.png"> </image>
        <span style="font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 28rpx; color: #a8a8a8; line-height: 40rpx; text-align: center; font-style: normal">暂无数据</span>
      </view>
    </view>
  </view>
</template>

<script>
import { getMerInviteUserList, getMerInviteList, getMerListSum, getWithdrawList, tixianYue } from "../../../utils/api/local.js";
import { IMG_URL } from "../../../config/index.js";
import { getUserInfo } from "../../../utils/request_api";
export default {
  data() {
    return {
      okSpForm: [] /* 邀请记录*/,
      imgurl: IMG_URL,
      dataList: [] /* 返利记录 */,
      total2: 0,
      pageNum3: 1,
      pageSize3: 15,
      pageNum2: 1,
      pageSize2: 15,
      total1: 0,
      pageNum1: 1,
      pageSize1: 15,
      merId: "",
      zSum: 0,
      yueSum: 0,
      activeTab: 3, // 默认激活的Tab，
      contents: "",
      ebMerInviteUserIntegrainfoIds: [],
      totalss: 0,
      yaoqingList: [],
    };
  },
  onShow() {
    const ebMerId = uni.getStorageSync("uid");
    this.merId = ebMerId;
    this.initData();
    this.getInviteList();
    this.getList();
    this.getSumList();
  },
  methods: {
    hideMiddleDigits(phoneNumber) {
      if (!phoneNumber || phoneNumber.length !== 11) return phoneNumber || "";
      return phoneNumber.slice(0, 3) + "****" + phoneNumber.slice(7);
    },
    tixian() {
      // this.contents = "确定要申请提现吗，提现金额" + this.yueSum + "元," + "在管理员审核后72小时内到账";
      // let that = this;
      // uni.showModal({
      //   title: "提示",
      //   content: this.contents,
      //   success: function (res) {
      //     if (res.confirm) {
      //       that.handleWithdraw();
      //     } else if (res.cancel) {
      //       console.log("用户点击取消");
      //     }
      //   },
      // });
      if (this.yueSum > 10) {
        uni.showToast({
          title: "提现余额不足，满十元提现",
          icon: "none",
          duration: 2000,
        });
        return;
      } else {
        uni.navigateTo({
          url: "/pages_h5/myCenter/components/user_money_add?type=invite",
        });
      }
    },
    async initData() {
      try {
        this.userData = await getUserInfo();
        //   const res = await this.$api.mock("pool");
        //   this.fee = res.fee;
        this.yueSum = this.userData && this.userData.data ? this.userData.data.integraSum || 0 : 0;
      } catch (error) {
        this.yueSum = 0;
      }
    },
    /* 申请提现 */
    /*     handleWithdraw() {
      if (this.yueSum < 10) {
        uni.showToast({
          title: "提现余额不足，满十元提现",
          icon: "none",
          duration: 2000,
        });
        return;
      }
      tixianYue({
        linkId: this.merId,
        type: 3,
        exchangeIntegrain: this.yueSum,
        status: 0,
        ebMerInviteUserIntegrainfoIds: this.ebMerInviteUserIntegrainfoIds,
      }).then((res) => {
        if (res.code == 200 && res.data == 1) {
          uni.showToast({
            title: "提现申请成功，请等待审核",
            icon: "none",
            duration: 2000,
          });
          this.getInviteList();
        } else if (res.code == 200 && res.data == -1) {
          uni.showToast({
            title: "已有未审核的兑换记录，请勿重复提交",
            icon: "none",
            duration: 2000,
          });
        }
      });
    }, */
    hideMiddleDigits(phoneNumber) {
      if (!phoneNumber || phoneNumber.length !== 11) return phoneNumber || "";
      return phoneNumber.slice(0, 3) + "****" + phoneNumber.slice(7);
    },
    nameHide(name) {
      if (!name) return "";
      if (name.length == 2) {
        return name.substring(0, 1) + "*";
      } else if (name.length == 3) {
        return name.substring(0, 1) + "*" + name.substring(2, 3);
      } else if (name.length > 3) {
        return name.substring(0, 1) + "*" + "*" + name.substring(3);
      }
      return name;
    },
    /* 邀请记录pageNum3 3*/
    getSumList() {
      uni.showLoading({
        title: "加载中...",
      });
      getMerListSum({
        type: 3,
        linkId: this.merId,
        addOrSub: 0,
      }).then((res) => {
        /* this.yueSum = res.data.yeSum; */
        this.zSum = res && res.data && res.data.sum ? res.data.sum : 0;
        this.ebMerInviteUserIntegrainfoIds = res && res.data && res.data.ids ? res.data.ids : [];
      });
      getMerInviteUserList({
        linkId: this.merId,
        type: 3,
        pageNum: this.pageNum3,
        pageSize: this.pageSize3,
      }).then((res) => {
        if (res && res.code === 200) {
          this.totalss = res.total || 0;
          this.yaoqingList = this.yaoqingList.concat(res.rows || []);
          uni.hideLoading();
        } else {
          uni.hideLoading();
        }
      });
    },
    /* 申请提现记录 2  pageNum1*/
    getInviteList() {
      uni.showLoading({
        title: "加载中...",
      });
      getWithdrawList({
        linkId: this.merId,
        type: 3,
        pageNum: this.pageNum1,
        pageSize: this.pageSize1,
      }).then((res) => {
        if (res && res.code === 200) {
          this.okSpForm = this.okSpForm.concat(res.rows || []);
          this.total1 = res.total || 0;
          uni.hideLoading();
        } else {
          uni.hideLoading();
        }
      });
    },
    /* 返利记录  1 pageNum2*/
    getList() {
      uni.showLoading({
        title: "加载中...",
      });
      getMerInviteList({
        pageNum: this.pageNum2,
        pageSize: this.pageSize2,
        type: 3,
        linkId: this.merId,
        addOrSub: 0,
      }).then((res) => {
        if (this.pageNum2 === 1) {
          this.dataList = res && res.rows ? res.rows : [];
        } else {
          this.dataList = this.dataList.concat(res && res.rows ? res.rows : []);
        }
        this.total2 = res && res.total ? res.total : 0;
        uni.hideLoading();
      });
    },
    loadMoreData() {
      if (this.activeTab == 2) {
        if (this.pageNum1 * this.pageSize1 >= this.total1) {
          uni.showToast({
            title: "没有更多数据了",
            icon: "none",
          });
        } else {
          this.pageNum1++;
          this.getInviteList();
        }
      } else if (this.activeTab == 1) {
        if (this.pageNum1 * this.pageSize1 >= this.total1) {
          uni.showToast({
            title: "没有更多数据了",
            icon: "none",
          });
        } else {
          this.pageNum1++;
          this.getInviteList();
        }
      } else if (this.activeTab == 3) {
        if (this.pageNum3 * this.pageSize3 >= this.totalss) {
          uni.showToast({
            title: "没有更多数据了",
            icon: "none",
          });
        } else {
          this.pageNum3++;
          this.getSumList();
        }
      }
    },
    switchTab(tabIndex) {
      this.activeTab = tabIndex;
      if (this.activeTab == 3) {
        this.pageNum3 = 1;
        this.yaoqingList = [];
        this.initData();
        this.getSumList();
      } else if (this.activeTab == 2) {
        this.pageNum1 = 1;
        this.okSpForm = [];
        this.getInviteList();
        this.initData();
      } else {
        this.pageNum2 = 1;
        this.dataList = [];
        this.initData();
        this.getList();
      }
    },
  },
  onReachBottom() {
    this.loadMoreData();
  },
};
</script>

<style scoped>
.textcss {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
  font-weight: 400;
  font-size: 24rpx;
  color: #ffffff;
  text-align: center;
}

.mcss {
  width: 166rpx;
  height: 48rpx;
  font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
  font-weight: bold;
  font-size: 40rpx;
  color: #ffffff;
  line-height: 48rpx;
  text-align: center;
}

.bgicss {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background-image: url(https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/05/08/小程序后台_20250508150126A002.png);
  margin-top: -780rpx;
  background-size: 100% 100%;
  height: 188rpx;
  width: 100%;
}

.tabs {
  display: flex;
  justify-content: space-around;
  margin-top: -580rpx;
}

.tab-item {
  font-size: 28rpx;
  color: #333;
  padding: 10rpx 0;
  text-align: center;
  width: 50%;
  cursor: pointer;
}

.tab-item.active {
  color: #ff5252;
  border-bottom: 2rpx solid #ff5252;
}

.invite-section,
.rebate-section {
  padding: 20rpx;
}

.section-title {
  font-size: 26rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}
</style>
